<template>
    <div id='taels_list'>
      <div class="search-box">
        <Row type="flex" align='middle' style="padding-top: 24px;">
          <Col style="width: 8px ;height: 20px;background: #2D8CF0;" class="search-item"></Col>
          <Col style="margin-left: 10px">
            <h3>武汉菱角湖万达店</h3>
          </Col>
        </Row>
        <Row type="flex">
          <Row type="flex" justify="start" class="search-item-left">
            <Col class="search-item">
              <span class="search-label">商品标题：</span>
              <Input placeholder="请输入" v-model='searchName'></Input>
            </Col>
            <Col class="search-item">
              <span class="search-label">显示状态：</span>
              <Select v-model="saleType" @on-change="doSearch" style="width:180px" placeholder='请选择'>
                <Option v-for="item in saleList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </Col>
            <Col class="search-item">
              <span class="search-label">上架状态：</span>
              <Select v-model="status" @on-change="doSearch" style="width:180px" placeholder='请选择'>
                <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </Col>
            <Col class="search-item">
              <Button class="search-btn" type='primary' @click="doSearch">查询</Button>
            </Col>
            <Col class="search-item">
              <Button class="search-btn" @click="reset">重置</Button>
            </Col>
          </Row>
          <Row type="flex" justify="end" class="search-item-right">
            <Col class="search-item">
              <Button class="search-btn" style="width: 120px" @click='displayDraw'>显示排序设置</Button>
            </Col>
          </Row>
          </Row>
        </Row>
      </div>
      <Table stripe class="table-list" :columns="columns" :data="tableData" :loading="loading" :height="tableHeight">
        <template slot-scope="{ row }" slot="status">
            <i-switch size="large" v-model='row.status'>
              <span slot="open">显示</span>
              <span slot="close">隐藏</span>
            </i-switch>
          </template>
          <template slot-scope="{ row }" slot="action">
            <Poptip confirm title="确认下架吗？" transfer  style="text-align:left">
              <i class="iconsys iconxiajia" title="下架"></i>
            </Poptip>
            <i class="iconsys iconshangjia" title="重新上架" @click='againUp(row)'></i>
          </template>
      </Table>
      <Row type='flex' justify="end" style='padding: 20px'>
        <Col>
          <Page :total="pageObj.total"
                :page-size='pageObj.pageSize'
                :current='pageObj.pageIndex'
                show-total
                show-sizer
                @on-change='changePageIndex'
                @on-page-size-change='changePageSize' />
        </Col>
      </Row>
      <Modal v-model="modalShow" title="重新上架" @on-ok="onSure" @on-cancel="onCancel">
        <Form ref="formInline" :model="formInline" :rules="ruleInline" :label-width="80" style="width: 340px;margin: 20px 0 0 20px">
          <FormItem prop="goodsName" label="商品名称">
            <Input placeholder="请输入" v-model='formInline.goodsName' style="width: 260px;"></Input>
          </FormItem>
          <FormItem prop="upTime" label="上架时间">
            <Input placeholder="请输入" v-model='formInline.upTime' style="width: 260px;"></Input>
          </FormItem>
          <FormItem prop="downTime" label="下架时间">
            <Input placeholder="请输入" v-model='formInline.downTime' style="width: 260px;"></Input>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button style="width:78px;margin-right:10px">取消</Button>
          <Button type="primary" style="width:78px">确定</Button>
        </div>
      </Modal>
      <display-order v-model="drawShow" :displayData='displayData' :value='drawShow' @closeDraw='closeDraw'></display-order>
    </div>
  </template>

<script>
import DisplayOrder from '@/view/components/display-order/index.vue'
export default {
  name: 'taels_list',
  components: { DisplayOrder },
  computed: {
    tableHeight () {
      let height = this.tableData.length > 10 ? 520 : 0
      return height
    }
  },
  data () {
    return {
      formInline: {
        goodsName: '',
        upTime: '',
        downTime: ''
      },
      ruleInline: {
        upTime: { required: true },
        downTime: { required: true }
      },
      modalShow: false,
      displayData: [],
      loading: false,
      drawShow: false,
      pageObj: {
        total: 0,
        pageIndex: 1,
        pageSize: 10
      },
      saleType: '',
      saleList: [],
      statusList: [],
      status: '',
      searchName: '',
      tableData: [
        {

        }
      ],
      columns: [
        // {
        //   type: 'selection',
        //   width: 60
        // },
        {
          title: '商品编码',
          key: 'shopName'
        },
        {
          title: '商品主图',
          key: 'shopName'
        },
        {
          title: '商品名称',
          key: 'shopName'
        },
        {
          title: '游戏卡分类',
          key: 'shopName'
        },
        {
          title: '平台价(元)',
          key: 'shopName'
        },
        {
          title: '上下架时间',
          key: 'shopName'
        },
        {
          title: '显示状态',
          key: 'shopName'
        },
        {
          title: '状态',
          key: 'shopName'
        },
        {
          title: '操作时间',
          slot: 'status'
        },
        {
          title: '操作',
          slot: 'action'
        }
      ]
    }
  },
  methods: {
    doSearch () {},
    reset () {},
    changePageIndex () {},
    changePageSize () {},
    displayDraw () {
      this.drawShow = true
    },
    closeDraw (data) {
      this.drawShow = data
    },
    onSure () {},
    onCancel () {},
    againUp (row) {
      this.modalShow = true
    }
  }
}
</script>

<style lang="less">
#taels_list{
  .search-box .search-item-right {
    width: 20%;
  }
  .search-box .search-item-left{
    width: 80%;
  }
}
</style>
